export default function useEchartMapOption(mapName) {
  const compId = mapName;
  var center = {
    南京市: [118.767413, 32.041544],
    无锡市: [120.301663, 31.574729],
    徐州市: [117.184811, 34.261792],
    常州市: [119.946973, 31.772752],
    苏州市: [120.619585, 31.299379],
    南通市: [120.864608, 32.016212],
    连云港市: [119.178821, 34.600018],
    淮安市: [119.021265, 33.597506],
    盐城市: [120.139998, 33.377631],
    扬州市: [119.421003, 32.393159],
    镇江市: [119.452753, 32.204402],
    泰州市: [119.915176, 32.484882],
    宿迁市: [118.275162, 33.963008],
  };

  // 定义颜色数组，每个元素对应一个区块的颜色
  var blockColors = [
    "rgba(255,0,0,0.8)",
    "rgba(0,255,0,0.8)",
    "rgba(0,0,255,0.8)",
  ];

  // 定义当前颜色索引
  var currentIndex = 0;

  function getOption(setting) {
    const { zoom, roam } = setting;

    const handleData = [
      {
        name: "天河区",
        value: [113.346375, 23.130092, 666],
      },
      {
        name: "荔湾区",
        value: [113.163552, 23.127433, 555],
      },
    ];

    console.log("handleData[0]", handleData[0]);

    let option = {
      cusWidth: 3,
      backgroundColor: "",
      legend: {
        show: false,
      },
      tooltip: {
        trigger: "item",
      },
      geo: {
        map: compId,
        // zoom: 1.1,
        // zIndex: 99,
        show: false,
      },
      series: [
        {
          tooltip: {
            show: true,
            padding: [6, 10],
            backgroundColor: "rgba(255,255,255,.8)",
            borderColor: "#fff",
            borderRadius: "10px",
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              lineHeight: 26,
              color: "rgba(0,0,0,.7)",
            },
            // data: componentProps.tooltipData
          },
          name: "数据",
          type: "map",
          // blendMode: "clear",
          map: compId, // 自定义扩展图表类型
          aspectScale: 1,
          // zoom: -100, //缩放
          zoom: 0.6,
          showLegendSymbol: false,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 14,
          },
          itemStyle: {
            // areaColor: "rgba(14,149,241,1)",
            areaColor: "rgba(0,54,105,1)",
            // borderColor: "rgba(233,233,233,1)",
            borderColor: "rgba(63,218,255,.6)",
            borderWidth: 1,
            shadowColor: "rgba(63, 218, 255,0.6)",
            shadowBlur: 35,
            // shadowColor: "rgba(14,149,241,1)",
            // borderWidth: 1,
            // shadowBlur: 22,
            fontSize: 100,
          },
          emphasis: {
            label: {
              show: true,
              color: "rgba(255,255,255,1)",
              fontSize: 10,
            },
            itemStyle: {
              areaColor: "rgba(255,240,64,.5)",
              borderColor: "rgba(255,255,255,1)",
              borderWidth: 1,
            },
          },
          layoutCenter: ["50%", "50%"],
          layoutSize: "160%",
          markPoint: {
            symbol: "none",
          },
        },
        {
          type: "effectScatter",
          tooltip: {
            show: true,
            padding: [6, 10],
            backgroundColor: "rgba(255,255,255,.8)",
            borderColor: "#fff",
            borderRadius: "10px",
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              lineHeight: 26,
              color: "rgba(0,0,0,.7)",
            },
            // formatter: function (param) {
            //   // console.log(param.data.popupContent)
            //   // return param.data.popupContent
            //   return getShowTooltipData(param);
            // },
            // data: componentProps.tooltipData
          },
          _cione_point: true,
          coordinateSystem: "geo",
          showEffectOn: "render",
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: "fill",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "rgba(29,233,182,1)",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(29,233,182,1)",
              shadowBlur: 10,
              shadowColor: "rgba(51,51,3,1)",
            },
          },
          symbolSize: 12,
          data: [
            {
              value: [113.29631, 23.188776],
              itemStyle: {
                color: "#4ab2e5",
              },
              popupContent: "广州体育馆",
              sort: "第1名",
              phone: "18396096445",
            },
            {
              value: [113.344891, 23.204986],
              itemStyle: {
                color: "#4fb6d2",
              },
              popupContent: "东坑山",
              sort: "第2名",
              phone: "17854567743",
            },
            {
              value: [113.343166, 23.232884],
              itemStyle: {
                color: "#52b9c7",
              },
              popupContent: "南潮高尔夫俱乐部",
              sort: "第3名",
              phone: "15715720813",
            },
            {
              value: [113.352652, 23.193294],
              itemStyle: {
                color: "#5abead",
              },
              popupContent: "南方医科大学",
              sort: "第4名",
              phone: "18818040509",
            },
            {
              value: [113.376511, 23.248027],
              itemStyle: {
                color: "#f34e2b",
              },
              popupContent: "大源洞",
              sort: "第5名",
              phone: "15180905693",
            },
            {
              value: [113.357251, 23.174956],
              itemStyle: {
                color: "#f56321",
              },
              popupContent: "广州天河汽车客运站",
              sort: "第6名",
              phone: "17660295408",
            },
            {
              value: [113.306084, 23.163793],
              itemStyle: {
                color: "#f56f1c",
              },
              popupContent: "云台花园",
              sort: "第7名",
              phone: "15059037559",
            },
          ],
        },
      ],
    };

   

    return option;
  }

  /**
   * 用于展示tooltip的数据提示内容
   * @param paramData tooltip数据
   */
  function getShowTooltipData(paramData) {
    // 定义要排除的字段
    const excludeKeys = ["value", "itemStyle"];
    const dataInfo = paramData.data;
    // 获取弹窗内容
    const popupContent = getPopupContent(dataInfo, excludeKeys);
    console.log("展示信息", popupContent);
    return popupContent;

    // 生成弹窗内容
    function getPopupContent(data, excludeKeys) {
      let popupContent = "";
      for (let key in data) {
        if (!excludeKeys.includes(key)) {
          popupContent += `<div>${data[key]}</div>`;
          // popupContent += `<div>${key}: ${data[key]}</div>`;
        }
      }
      return popupContent.trim();
    }
  }

  function updateOption() {}
  // function updateOption({ myChart, option }) {
  //   // // 更新颜色函数
  //   const areaColor = ["天河区", "荔湾区", "黄埔区"];
  //   function updateColors(name) {
  //     option.geo3D.regions = [
  //       {
  //         name,
  //         itemStyle: {
  //           color: "green",
  //         },
  //       },
  //     ];
  //     console.log("option", option);

  //     myChart.setOption(option);
  //     // currentIndex = (currentIndex + 1) % blockColors.length;
  //     // option.series[0].data[0].itemStyle.areaColor = blockColors[currentIndex];
  //   }

  //   // // 每隔一段时间更新一次颜色
  //   let n = 0;
  //   // updateColors(areaColor[n]);
  //   setInterval(() => {
  //     if (n === areaColor.length) {
  //       n = 0;
  //     }
  //     console.log("n", n, areaColor[n])
  //     updateColors(areaColor[n]);
  //     n++;
  //   }, 2000);
  // }

  return {
    getOption,
    updateOption,
  };
}
